<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= I18n.t('maintenance.title') %></title>
    <style>
      body,
      		body * {
      			margin: 0px;
      			padding: 0px;
      			box-sizing: border-box;
      		}

      		body {
      			background-color: #f9f9f9;
      			color: black;
      			font-family: Arial, sans-serif;
      			text-align: center;
      			padding: 20px;
      			min-height: 100vh;
      			display: flex;
      			align-items: center;
      			justify-content: center;
      		}

      		.container{
      			display: flex;
      			flex-direction: column;
      			align-items: center;
      			max-width: 500px
      		}

      		.container h1 {
      			margin-top: 1rem;
      			font-size: 2rem;
      			font-weight: bold;
      		}

      		.container p {
      			margin-top: 0.5rem;
      			font-size: 1rem;
      		}

      		.container img {
      			width: 100%;
      		}
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./images/maintenance.svg" alt="Pupilfirst logo illustrating maintenance">
      <div>
        <h1><%= I18n.t('maintenance.heading') %></h1>
        <p><%= I18n.t('maintenance.message') %></p>
      </div>
    </div>
  </body>
</html>
